<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-table class="el-table_p" size="mini" ref="multipleTable" border :data="orderDataArr"
          :header-cell-style="{ background: '#f4f3f9', color: 'black', }">
          <!--<el-table-column type="selection" ></el-table-column>-->
          <el-table-column prop="userAccount" label="个人信息" align="">
            <template #default="scope">
              <div>
                学员姓名：{{ scope.row.userTrueName }}
              </div>

              <div>
                学员电话：{{ scope.row.phone }}
              </div>
              <!-- <div>
                学员微信：{{ scope.row.wx}}
              </div>
              <div>
                学员QQ：{{ scope.row.qq}}
              </div> -->
            </template>
          </el-table-column>
          <el-table-column prop="name" label="课程信息" align="">
            <template #default="scope">
              <div>
                课程名称：{{ scope.row.name }}
              </div>
              <div>
                课程时长：{{ scope.row.term }}
              </div>
              <div>
                <!--开课日期：{{ scope.row.startDate.split(" ")[0] }}-->
              </div>

              <!-- <div>
                是否监护人办理：{{ scope.row.parentOperate}}
              </div> -->
            </template>
          </el-table-column>
          <el-table-column prop="name" label="办理信息" align="">
            <template #default="scope">
              <div class="normal-pay" style="font-weight: bolder;">
                申请分期金额：￥{{ scope.row.amount }}
              </div>
              <div>
                分期手续费：￥{{ scope.row.serviceFee }}
              </div>
              <div>
                支付方式：{{ scope.row.stageOne + "+" + scope.row.stageTwo + "A" }}
              </div>
              <!--<div>-->
              <!--一次支付折扣：￥{{ scope.row.maxCoupon}}-->
              <!--</div>-->
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width='80' align="center">
            <template slot-scope="scope">
              <div class="payingStyle">

                <span v-if="scope.row.status == 0">
                  {{ "待审核" }}
                  <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">待审核</el-button>-->
                </span>
                <span v-if="scope.row.status == 1" >
                  {{ "审核通过" }}
                  <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">审核通过</el-button>-->
                </span>
                <span v-if="scope.row.status == 2" class="noPay">
                  {{ "支付中" }}
                  <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">已关闭</el-button>-->
                </span>
                <span v-if="scope.row.status == 3" class="payed">
                  {{ "已结清" }}
                  <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">已关闭</el-button>-->
                </span>
                <span v-if="scope.row.status == 4">
                  {{ "已关闭" }}
                  <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">已关闭</el-button>-->
                </span>
              </div>

              <!--订单状态：0:待审核,1:审核通过,2:支付中，3：已还清，4：已关闭-->
            </template>

          </el-table-column>

          <!--<el-table-column prop="createTime" label="创建时间" align="center">-->
          <!--</el-table-column>-->
          <!--<el-table-column label="操作" align="center"  v-if="level==1">-->
          <!--<template slot-scope="scope">-->
          <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">编辑</el-button>-->
          <!--<el-button size="mini" type="primary" @click="orderDetail(scope.row)">详情</el-button>-->
          <!--<el-button size="mini" type="danger" @click="handleDelete(scope.row.orderId)">删除</el-button>-->
          <!--</template>-->
          <!--</el-table-column>-->
        </el-table>
        <!--<el-button type="primary" size="mini" @click="delAll">批量删除</el-button>-->
        <!--<el-input v-model="select_word" size="mini" placeholder="查询管理员（id,用户名，昵称）" class="handle-input"></el-input>-->
        <!--<el-button type="primary" size="mini" @click="centerDialogVisible = true">添加管理员</el-button>-->
      </div>

      <div class=" el-table_p">
        <el-card class="cardNeedPay">
          <h2 class="noPay">待支付总金额：￥{{allOneAmount}}</h2>
        </el-card>
        <el-card class="cardNeedPay">
          <h2 class="payed">已支付总金额：￥{{holdOneAmount}}</h2>
        </el-card>
        <el-card class="cardNeedPay">
          <h2 class="overtime-nopay">逾期支付总金额：￥{{delayOneAmount}}</h2>
        </el-card>
      </div>

    </div>



    <el-table class="el-table_p" size="mini" ref="multipleTable" border :data="orderList"
      :header-cell-style="{ background: '#f4f3f9', color: 'black', }">
      <template slot-scope="scope">
        <template>
          <el-table-column prop="stage" width="80" label="期数" align="center">
          </el-table-column>
          <el-table-column prop="amount" label="学费" align="center">
          </el-table-column>
          <el-table-column prop="serviceFee" label="技术服务费(元)" align="center">
          </el-table-column>
          <el-table-column prop="discount" label="提前支付优惠金额(元)" align="center">
          </el-table-column>
          <el-table-column prop="delayShareAmount" label="均摊金额(元)" align="center">
          </el-table-column>
          <el-table-column prop="overdueAmount" label="逾期违约金(元)" align="center">
          </el-table-column>
          <el-table-column prop="repaymentDate" label="还款日期" align="center">
          </el-table-column>

          <el-table-column prop="paymentTime" label="支付时间" align="center">
          </el-table-column>
          <el-table-column prop="status" label="状态" width='80' align="center">
            <template slot-scope="scope">
              <div style="font-weight: bolder;">

              <template v-if="scope.row.status == 0">
                <span class="noPay">
                {{ "待支付" }}
                </span>
              </template>
              <template v-if="scope.row.status == 1">
                <span class="payed">
                {{ "已支付" }}
                </span>
              </template>
              <template v-if="scope.row.status == 2">
                <span class="overtime-nopay">
                  {{ "支付逾期" }}
                </span>
              </template>
              <template v-if="scope.row.status == 3">
                <template v-if="scope.row.delayType == 0">
                  关闭
                </template>
                <template v-if="scope.row.delayType == 1">
                  延期
                </template>
                <template v-if="scope.row.delayType == 2">
                  均摊
                </template>
              </template>
            </div>

            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center" width="200px">
            <template slot-scope="scope">
              <el-button size="mini" v-if="scope.row.status == 0 || scope.row.status == 2" class="template_btn"
                type="primary" @click="avgAmount(scope.row)">均摊
              </el-button>
              <el-button size="mini" v-if="scope.row.status == 0 || scope.row.status == 2" class="template_btn"
                type="success" @click="addOneMonth(scope.row)">延期
              </el-button>
              <el-button v-if="scope.row.status == 0 || scope.row.status == 2" size="mini" class="template_btn"
                type="danger" @click="closeOrderStage(scope.row)">支付
              </el-button>
            </template>
          </el-table-column>
        </template>

      </template>
    </el-table>
    <el-dialog title="均摊" :visible.sync="avgAmountVisible" width="84%" center>
      <div align="center" style="color: red;margin-bottom: 20px;font-size: 14px;font-weight: bold">
        点击确定后，会把本期学费+服务费均摊到后面各期支付总额中 (剩余均摊+延期次数:{{ orderDataArr.length ? orderDataArr[0].applyOverdueCount : '' }})
      </div>
      <el-table class="el-table_p" size="mini" ref="multipleTable" border :data="avgAmountArr">
        <!--<el-table-column type="selection" ></el-table-column>-->
        <el-table-column prop="stage" width="80" label="期数" align="center">
        </el-table-column>
        <el-table-column prop="amount" label="学费" align="center">
        </el-table-column>
        <el-table-column prop="serviceFee" label="技术服务费(元)" align="center">
        </el-table-column>
        <el-table-column prop="discount" label="提前支付优惠金额(元)" align="center">
        </el-table-column>
        <el-table-column prop="delayShareAmount" label="均摊金额(元)" align="center">
        </el-table-column>
        <el-table-column prop="overdueAmount" label="逾期违约金(元)" align="center">
        </el-table-column>
        <el-table-column prop="repaymentDate" label="还款日期" align="center">
        </el-table-column>
        <el-table-column prop="paymentTime" label="支付时间" align="center">
        </el-table-column>

        <el-table-column prop="status" label="状态" width='80' align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.status == 0">
              {{ "待支付" }}
            </template>
            <template v-if="scope.row.status == 1">
              {{ "已支付" }}
            </template>
            <template v-if="scope.row.status == 2">
              {{ "支付逾期" }}
            </template>
            <template v-if="scope.row.status == 3">
              {{ "延期关闭" }}
            </template>
          </template>
        </el-table-column>
        <!--<el-table-column prop="updateBy" label="修改人" align="center">-->
        <!--</el-table-column>-->
        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center">
        </el-table-column>
      </el-table>
      <span slot="footer">
        <el-button size="mini" @click="avgAmountVisible = false">取消</el-button>
        <el-button size="mini" @click="affirmAvg" type="primary">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="延期" :visible.sync="addOneMonthVisible" width="84%" center>
      <div align="center" style="color: red;margin-bottom: 20px;font-size: 14px;font-weight: bold">
        点击确定后，
        会把本期支付费用推后一期支付 (注意: 会影响提前支付优惠金额。剩余均摊+延期次数:{{ orderDataArr.length ? orderDataArr[0].applyOverdueCount : '' }})
      </div>
      <el-table class="el-table_p" size="mini" ref="multipleTable" border :data="addOneMonthArr">
        <!--<el-table-column type="selection" ></el-table-column>-->
        <el-table-column prop="stage" width="80" label="期数" align="center">
        </el-table-column>
        <el-table-column prop="amount" label="学费" align="center">
        </el-table-column>
        <el-table-column prop="serviceFee" label="技术服务费(元)" align="center">
        </el-table-column>
        <el-table-column prop="discount" label="提前支付优惠金额(元)" align="center">
        </el-table-column>
        <el-table-column prop="delayShareAmount" label="均摊金额(元)" align="center">
        </el-table-column>
        <el-table-column prop="overdueAmount" label="逾期违约金(元)" align="center">
        </el-table-column>
        <el-table-column prop="repaymentDate" label="还款日期" align="center">
        </el-table-column>
        <el-table-column prop="paymentTime" label="支付时间" align="center">
        </el-table-column>

        <el-table-column prop="status" label="状态" width='80' align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.status == 0">
              {{ "待支付" }}
            </template>
            <template v-if="scope.row.status == 1">
              {{ "已支付" }}
            </template>
            <template v-if="scope.row.status == 2">
              {{ "支付逾期" }}
            </template>
            <template v-if="scope.row.status == 3">
              {{ "延期关闭" }}
            </template>
          </template>
        </el-table-column>

        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center">
        </el-table-column>
      </el-table>
      <span slot="footer">
        <el-button size="mini" @click="addOneMonthVisible = false">取消</el-button>
        <el-button size="mini" @click="affirmOneMonth" type="primary">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="更改支付状态" :visible.sync="closeOrderVisible" width="84%" center>
      <el-table class="el-table_p" size="mini" ref="multipleTable" border :data="closeOrderArr">
        <el-table-column prop="stage" width="80" label="期数" align="center">
        </el-table-column>
        <el-table-column prop="amount" label="学费" align="center">
        </el-table-column>
        <el-table-column prop="serviceFee" label="技术服务费(元)" align="center">
        </el-table-column>
        <el-table-column prop="discount" label="提前支付优惠金额(元)" align="center">
        </el-table-column>
        <el-table-column prop="delayShareAmount" label="均摊金额(元)" align="center">
        </el-table-column>
        <el-table-column prop="overdueAmount" label="逾期违约金(元)" align="center">
        </el-table-column>
        <el-table-column prop="repaymentDate" label="还款日期" align="center">
        </el-table-column>
        <el-table-column prop="paymentTime" label="支付时间" align="center">
        </el-table-column>

        <el-table-column prop="status" label="状态" width='80' align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.status == 0">
              {{ "待支付" }}
            </template>
            <template v-if="scope.row.status == 1">
              {{ "已支付" }}
            </template>
            <template v-if="scope.row.status == 2">
              {{ "支付逾期" }}
            </template>
            <template v-if="scope.row.status == 3">
              {{ "延期关闭" }}
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center">
        </el-table-column>
      </el-table>
      <span slot="footer">
        <el-button size="mini" @click="closeOrderVisible = false">取消</el-button>
        <el-button size="mini" @click="affirmCloseOrder" type="primary">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getOrderStage, affirmAvg, getOrderById, affirmOneMonth, affirmCloseOrder,getOneStudengtAmount } from '../../api/public/api';
import { mixin } from '../../../static/js/index';
import { getNowFormatDate } from '../../units/time'

export default {
  mixins: [mixin],
  // props: ['id'],
  data() {
    return {
      level: 0,
      orderList: [],
      id: "",
      avgAmountVisible: false,//均摊弹框
      avgAmountArr: [],//均摊订单
      orderDataArr: [],//顶部数据
      addOneMonthArr: [],
      addOneMonthVisible: false,
      closeOrderVisible: false,
      closeOrderArr: [],
      allOneAmount: 0,       //待收总金额
      delayOneAmount: 0,     //逾期总金额
      holdOneAmount: 0,    // 已收总金额
      receivableOneAmount: 0,    // 应收总金额


    }
  },


  mounted() {
    this.id = this.$route.query.id
    this.getData(this.id);
    // this.getOrderById(this.id)
    this.level = localStorage.getItem('level')
    this.getOneStudengtAmount(this.id);
  },
  methods: {
    //顶部数据
    getOrderById(id) {
      getOrderById(id).then(res => {
        // console.log(res)
        if (res.data.code == 0) {
          // if (res.data.data.createTime) {
          //   res.data.data.createTime = getNowFormatDate(res.data.data.createTime)
          // }
          //
          // this.orderDataArr.push(res.data)
          // console.log(this.orderDataArr)
        }
      })
    },
    //查询订单详情
    getData(data) {
      getOrderById(data).then(res => {
        // console.log('this.orderDataArr---------',this.orderDataArr)

        // console.log(res.data.data)
        if (res.data.code == 0) {
          if (!this.orderDataArr.length) {
            this.orderDataArr.push(res.data.data)
          }
          res.data.data.orderStages.map(item => {
            if (item.createTime) {
              item.createTime = getNowFormatDate(item.createTime)
            }
            if (item.paymentTime) {
              item.paymentTime = getNowFormatDate(item.paymentTime)
            }
            if (item.repaymentDate) {
              item.repaymentDate = getNowFormatDate(item.repaymentDate).split(" ")[0]

            }
            if (item.pushDate) {
              item.pushDate = getNowFormatDate(item.pushDate)
            }
            if (item.updateTime) {
              item.updateTime = getNowFormatDate(item.updateTime)
            }
            item.amount = parseFloat(item.amount).toFixed(2)
            item.serviceFee = parseFloat(item.serviceFee).toFixed(2)
            item.discount = parseFloat(item.discount).toFixed(2)
            item.delayShareAmount = parseFloat(item.delayShareAmount).toFixed(2)
            item.overdueAmount = parseFloat(item.overdueAmount).toFixed(2)
            //合并备注
            item.remark = item.remark ? item.remark + "         " : "" + item.delayDesc ? item.delayDesc : ""
            if (item.stage == -1 && item.status == 1) {
              item.stage = "合并"
            }
          })
          this.orderList = res.data.data.orderStages
          console.log(this.orderList)
        }


      })
    },

    // avgAmount 均摊
    avgAmount(row) {
      this.avgAmountArr = []
      this.avgAmountArr.push(row)
      this.avgAmountVisible = true

    },
    affirmAvg() {
      let data = {
        "id": this.avgAmountArr[0].id,
        "orderId": this.avgAmountArr[0].orderId
      }
      affirmAvg(data).then(res => {
        // console.log(res)
        if (res.data.code == 0) {
          this.getData(this.id);
          this.avgAmountVisible = false
          this.notify("均摊", "success");

          this.getOneStudengtAmount(this.id)
        } else {
          this.notify(res.data.msg, "error");
        }
      })
    },
    // addOneMonth 延期
    addOneMonth(row) {
      this.addOneMonthArr = []
      this.addOneMonthArr.push(row)
      this.addOneMonthVisible = true

    },
    affirmOneMonth() {
      let data = {
        "id": this.addOneMonthArr[0].id,
        "orderId": this.addOneMonthArr[0].orderId
      }
      affirmOneMonth(data).then(res => {
        // console.log(res)
        if (res.data.code == 0) {
          this.getData(this.id);
          // this.getOrderById(this.id)
          this.addOneMonthVisible = false
          this.notify("延期", "success");

          this.getOneStudengtAmount(this.id)

        } else {
          this.notify(res.data.msg, "error");
        }
      })
    },


    //关闭订单 修改成关闭 即表示已支付
    closeOrderStage(row) {
      console.log(row, "roow")
      this.closeOrderArr = []
      this.closeOrderArr.push(row)
      console.log(this.closeOrderArr, "this.closeOrderArr")
      this.closeOrderVisible = true
    },
    affirmCloseOrder() {
      let data = {
        "id": this.closeOrderArr[0].id,
        "orderId": this.closeOrderArr[0].orderId,
        "status": 1//1改订单已支付
      }
      affirmCloseOrder(data).then(res => {
        if (res.data.code == 0) {
          this.getData(this.id);
          this.closeOrderVisible = false
          this.notify("关闭成功", "success");
          // this.getOrderById(this.id)
          this.getOneStudengtAmount(this.id)
        } else {
          this.notify("关闭失败", "error");
        }
      })
    },
    getOneStudengtAmount(id){
      getOneStudengtAmount(id).then(res=>{
        console.log("res---------------",res);
        if(res.data.code == 0){
          this.allOneAmount = parseFloat(res.data.data.amount).toFixed(2)
          this.delayOneAmount = parseFloat(res.data.data.delayAmount).toFixed(2)
          this.holdOneAmount = parseFloat(res.data.data.holdAmount).toFixed(2)
          this.receivableOneAmount = parseFloat(res.data.data.receivableAmount).toFixed(2)
        }

      })
    }

  }
}
</script>

<style scoped>
@import "./order.css";
.cardNeedPay {
  text-align: center;
  width: 30%;
  margin: auto;
  color: #F56C6C;
  display: inline-block;
}

.handle-box {
  margin-bottom: 20px;
}

.template_btn {
  margin-bottom: 10px !important;
  margin-left: 0 !important;
}

.payingStyle {
  font-weight: bolder;
  color: black;
}

</style>
